<template>
    <a-modal v-model:visible="visible" @cancel="closeModal" :footer="false">
        <template #title> {{title}}</template>
        <h4 style="margin-top: 0">复制分享链接</h4>
        <a-typography-paragraph copyable>
            {{ link }}
        </a-typography-paragraph>
        <h4>手机扫码查看</h4>
        <img :src="codeImg" />
    </a-modal>
</template>

<script setup lang="ts">
    import QRCode from "qrcode";
    import { ref } from "vue";
    import message from "@arco-design/web-vue/es/message"

    //因为标题和链接是动态获取的，所以需要父组件传递过来
    interface Props {
        title:string
        link:string
    }

    const props = withDefaults(defineProps<Props>(),{
        title: () => "分享",
        link: () => "http://www.academicnav.cn"
    })

    const codeImg = ref()

    // With promises
    QRCode.toDataURL(props.link)
        .then((url:string) => {
            codeImg.value = url;
        })
        .catch((err:string) => {
            message.error("加载二维码失败")
        });

    const visible = ref(false);

    //打开弹窗
    const handleClick = () => {
        visible.value = true;
    };

    //关闭弹窗
    const handleCancel = () => {
        visible.value = false;
    }

    //暴露给父组件进行对话框展示
    defineExpose({
        handleClick
    })
</script>

<style scoped></style>